<template>
  <div id="header-container">
    <p>第{{ counter }}手：当前落子方为{{ val }}</p>
    <p></p>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['counter'],
  computed: {
    val() {
      // 假设 X 先手
      return this.counter % 2 === 0 ? 'X' : 'O'
    }
  }
}
</script>

<style lang="less" scoped>
  #header-container {
    margin: 20px 0;
  }
</style>